<template>
  <div class="commission-list table-theme">
    <el-card>
      <div class="ranking-title">{{ title }}业绩提成记录</div>
      <div class="top-menu">
        <div class="menu-left">
          <div class="type-view">
            <div
              class="client-item"
              v-for="(item, index) in timeList"
              @click="timeSelect(item.value, item.label)"
              :key="index"
              :class="[time == item.value ? 'client-item-active' : '']"
            >
              {{ item.label }}
            </div>
          </div>
          <select-view
            :option-list="orderbyList"
            :value="order_by"
            placeholder="选择排序"
            type="order_by"
            @value="setSelectValue"
          >
          </select-view>
          <select-view
            :option-list="groupList"
            :value="group"
            placeholder="查询方式"
            type="group"
            @value="setSelectValue"
          >
          </select-view>
          <select-view
            :option-list="sourceList"
            :value="source"
            placeholder="角色"
            type="source"
            @value="setSelectValue"
          >
          </select-view>
        </div>
        <div class="menu-right">
          <refresh-button @refresh="refreshPage"></refresh-button>
          <search-view
            :option="searchOption"
            @value="goSearch"
            @clear="refreshPage"
          ></search-view>
        </div>
      </div>

      <p class="data-number">数据总数：{{ total }}</p>
      <el-table :data="wList">
        <el-table-column
          label="用户ID"
          align="center"
          prop="user.user_id"
        ></el-table-column>
        <el-table-column
          label="用户名"
          align="center"
          prop="user.nickname"
        ></el-table-column>
        <!-- <el-table-column label="用户电话" align="center" prop="user.phone"></el-table-column> -->
        <el-table-column label="头像" align="center" prop="">
          <template slot-scope="scope">
            <ImgPopover :src="scope.row.user.heard_img"></ImgPopover>
          </template>
        </el-table-column>
        <!-- <el-table-column label="店铺ID" align="center" prop="store_id"></el-table-column> -->
        <el-table-column
          label="店铺名"
          align="center"
          prop="store_name"
        ></el-table-column>
        <el-table-column
          label="订单ID"
          align="center"
          prop="order_id"
        ></el-table-column>
        <el-table-column
          label="订单金额(元)"
          align="center"
          prop="order_amount"
        ></el-table-column>
        <el-table-column label="提成" align="center" prop="">
          <template slot-scope="scope">
            <el-tag type="danger">{{ scope.row.money }}元</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="累计提成" align="center" prop="">
					<template slot-scope="scope">
						<el-tag type="danger">{{ scope.row.all_money }}元</el-tag>
					</template>
				</el-table-column> -->
        <el-table-column
          label="下单时间"
          align="center"
          prop="add_time"
        ></el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="brief"
        ></el-table-column>
        <el-table-column label="查看订单" align="center">
          <template slot-scope="scope">
            <el-button
              class="margin-top6px"
              type="primary"
              size="mini"
              @click="goOrderDetails(scope.row.order_id)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="30"
          @current-change="init"
          :current-page="page"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import ImgPopover from "@/components/ImgPopover";
import SelectView from "@/components/SelectView";
export default {
  components: {
    ImgPopover,
    SelectView,
  },
  data() {
    return {
      selectContent: "", // 分类搜索平输入框的值
      classSelect: "", // 分类搜索
      searchOption: [
        {
          value: 0,
          label: "用户ID",
        },
      ],
      title: "全部",
      time: 0,
      timeList: [
        {
          value: 0,
          label: "全部",
        },
        {
          value: "today",
          label: "本日",
        },
        {
          value: "yesterday",
          label: "昨日",
        },
        {
          value: "week",
          label: "本周",
        },
        {
          value: "lastWeek",
          label: "上周",
        },
        {
          value: "month",
          label: "本月",
        },
        {
          value: "lastMonth",
          label: "上个月",
        },
        {
          value: "year",
          label: "今年",
        },
        {
          value: "lastYear",
          label: "上一年",
        },
      ],
      orderbyList: [
        {
          label: "时间排序",
          value: "add_time",
        },
        {
          label: "金额排序",
          value: "money",
        },
      ],
      order_by: "money",
      ase: 2,
      group: 1,
      groupList: [
        {
          value: 0,
          label: "所有订单",
        },
        {
          value: 1,
          label: "按人统计",
        },
      ],
      source: 0,
      sourceList: [
        {
          value: 0,
          label: "默认角色",
        },
        {
          value: 1,
          label: "招商员提成",
        },
        {
          value: 2,
          label: "业绩员提成",
        },
      ],
      wList: [],
      total: 0,
      page: 0,
    };
  },
  methods: {
    // 查看订单详情
    goOrderDetails(id) {
      this.$router.push({
        path: "/order_details",
        query: {
          id: id,
        },
      });
    },
    // 初始化列表
    init(e) {
      this.page = e;
      let data = {
        page: e - 1 ? e - 1 : 0,
        limit: 30,
        time: this.time == 0 ? "" : this.time,
        order_by: this.order_by,
        asc: this.ase,
      };

      if (this.group != 0) data.group = this.group;

      if (this.source != 0) data.source = this.source;

      if (this.classSelect == 0) data.user_id = this.selectContent;
      this.wList = [];
      this.$http(this.$ApiList.AdminroyaltyLists, data).then((res) => {
        this.wList = res.datas;
        this.total = res.counts;
      });
    },
    timeSelect(time, title) {
      this.time = time;
      this.title = title;
      this.init();
    },
    // 刷新
    refreshPage() {
      this.page = 1;
      this.time = 0;
      this.asc = 2;
      this.selectContent = "";
      this.init();
    },
    goSearch(classSelect, selectContent) {
      this.classSelect = classSelect;
      this.selectContent = selectContent;
      this.init();
    },
    setSelectValue(obj) {
      const { type, value } = obj;
      switch (type) {
        case "group":
          this.group = value;
          break;
        case "order_by":
          this.order_by = value;
          break;
        case "source":
          this.source = value;
          break;
        default:
          break;
      }
      this.init();
    },
  },
  created() {
    this.init();
  },
};
</script>
<style lang="scss" scoped>
.commission-list {
  .data-filtering-left {
    display: flex;
  }

  .ranking-title {
    font-size: 26px;
    font-weight: bold;
  }
  .type-view {
    display: flex;
  }

  .type-view .client-item {
    margin-right: 40px;
    line-height: 40px;
    color: rgba(153, 153, 153, 1);
    cursor: pointer;
  }

  .client-item-active {
    color: #333333 !important;
    border-bottom: 4px solid #34a1e0;
  }
}
</style>
